<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="账号名称" v-model="filters.like$username"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column sortable="custom" prop="username" align="center" label="账户名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300" align="center" label="角色">
        <template slot-scope="scope">
          <span v-for="role in scope.row.roles" :key="role.id">


            <el-tag>{{role.role_name}}</el-tag>
            &nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column width="180" sortable="custom" prop="createTime" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" sortable="custom" prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusTagFilter">{{scope.row.status|statusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button v-if="scope.row.username!='admin' && scope.row.status==0" size="mini" @click="handleModifyStatus(scope.row,'frozen')">停用</el-button>
          <el-button v-if="scope.row.username!='admin' && scope.row.status==1" size="mini" @click="handleModifyStatus(scope.row,'unFrozen')">启用</el-button>
          <el-button v-if="scope.row.username!='admin'" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="账户名称" prop="username">
          <el-input v-model="temp.username" :readonly="isEditing"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-checkbox-group v-model="temp.roleIds">
            <el-checkbox :label="role.id" :key="role.id" v-for="role in roleList">{{role.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="设置密码" prop="pwd">
          <el-input v-model="temp.pwd" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import baseMixin from "../../mixins/baseMixin";
  let statusMap = ["正常", "冻结"];
  export default {
    mixins: [baseMixin],
    data() {
      return {
        total: 0,
        roleList: [],

        temp: {
          id: "",
          roleIds: [],
          username: "",
          pwd: ""
        },
        role_options: [],
        rules: {
          username: [{
            required: true,
            message: "账户名称不能为空",
            trigger: "change"
          }],
          roleId: [{
            required: true,
            message: "角色不能为空",
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.init("admin", 1).loadData();
      this.combOptions("role").then(rt => {
        if (rt.data && rt.data.errcode == 0) {
          this.role_options = rt.data.info;
        }
      });
      this.$get("/admin/admin_role/role_list").then(data => {
        this.roleList = data;
      });

    },
    filters: {
      statusFilter(status) {
        return statusMap[parseInt(status)];
      },
      statusTagFilter(status) {
        return ["success", "danger"][parseInt(status)];
      }
    },
    methods: {
      __onAfterHandleEditUpdate(row) {
        let ids = [];
        row.roles && row.roles.forEach(element => {
          ids.push(element.id);
        });
        this.temp.roleIds = ids;
      },
      __onFormSubmit(row) {
        this.temp._roleIds = this.temp.roleIds.join(',');
      },
      exportExcelFile() {
        this.exportExcel({
          title: "账户管理",
          fields: [{
              field: "username",
              title: "账号名称"
            },
            {
              field: "createTime",
              title: "创建时间"
            },
            {
              field: "roleName",
              title: "角色"
            },
            {
              field: "status",
              title: "状态",
              valueMap: ["正常", "冻结"]
            }
          ]
        }).then(res => {
          if (res.data.errcode == 0) {
            this.openWin(res.data.info);
          } else {
            this.$error(res.data.info);
          }
        });
      },
      handleModifyStatus(row, tag) {
        let id = row.id;
        if (tag == "unFrozen") {
          this.$post("/admin/admin/unFrozen", {
            id
          }).then(_ => {
            row.status = 0;
            this.$success();
          });
        } else if (tag == "frozen") {
          this.$post("/admin/admin/frozen", {
            id
          }).then( _ => {
            row.status = 1;
            this.$success();
          });
        }
      }
    }
  };

</script>
